---
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import Chat from '@enterprise/eventcatalog-chat/components/Chat';
import { getChatPromptsGroupedByCategory } from '@enterprise/eventcatalog-chat/utils/chat-prompts';
import config from '@config';
import { Code } from 'astro-expressive-code/components';
import { getDomains } from '@utils/collections/domains';
import { getEvents } from '@utils/events';
import { getCommands } from '@utils/commands';
import { getServices } from '@utils/collections/services';
import { getQueries } from '@utils/queries';

const isEnabled = config.chat?.enabled || false;
const chatConfig = config.chat || {};
const output = config.output || 'static';

// Get all information for the mention input
const [events, commands, queries, services, domains] = await Promise.all([
  getEvents({ getAllVersions: false }),
  getCommands({ getAllVersions: false }),
  getQueries({ getAllVersions: false }),
  getServices({ getAllVersions: false }),
  getDomains({ getAllVersions: false }),
]);
const allItems = [...events, ...commands, ...queries, ...services, ...domains];

const chatPrompts = await getChatPromptsGroupedByCategory();

const resources = allItems.map((item) => ({ id: item.data.id, type: item.collection, name: item.data.name }));
---

<VerticalSideBarLayout title="AI Chat">
  <div class="flex h-[calc(100vh-60px)] bg-white">
    {
      isEnabled ? (
        <>
          <div id="chatContainer" class="w-full">
            <Chat
              client:only="react"
              chatConfig={{
                ...chatConfig,
              }}
              resources={resources}
              chatPrompts={chatPrompts}
              output={output as 'static' | 'server'}
            />
          </div>
        </>
      ) : (
        <div class="flex items-center justify-center w-full p-4 sm:p-8">
          <div class="max-w-6xl flex flex-col md:flex-row gap-8 md:gap-12 items-center">
            {/* Left side - Illustration */}
            <div class="flex-1">
              <img
                src="/images/ai-placeholder.png"
                alt="AI Assistant Illustration"
                class="w-full max-w-sm md:max-w-md mx-auto  rounded-lg shadow-lg"
              />
            </div>

            {/* Right side - Content */}
            <div class="flex-1">
              <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">EventCatalog AI Assistant</h2>
              <p class="text-gray-600 mb-6 text-base md:text-lg">
                Chat with your catalog to quickly find information, understand relationships, and get instant answers about your
                architecture. Our AI-powered assistant makes exploring your event catalog faster and more intuitive than ever.
              </p>

              <div class="bg-gray-700 rounded-lg p-4 md:p-6 mb-4">
                <h3 class="text-lg text-white font-semibold mb-3">Quick Setup</h3>
                <Code code={`npm install @eventcatalog/generator-ai`} lang="bash" frame="none" />
                <a
                  href="https://www.eventcatalog.dev/features/ai-assistant"
                  class="inline-flex items-center text-sm text-white mt-4"
                >
                  Learn more about setup →
                </a>
              </div>
              <p class="text-gray-600 mb-6 text-sm">
                Your data stays private and secure - all processing happens locally on your machine.
              </p>
            </div>
          </div>
        </div>
      )
    }
  </div>
</VerticalSideBarLayout>

<style>
  .loading-status.ready {
    background-color: rgb(240 253 244); /* light green bg */
    color: rgb(22 163 74); /* green text */
  }

  .loading-status.hidden {
    display: none;
  }

  /* Add smooth scrolling behavior */
  .scroll-smooth {
    scroll-behavior: smooth;
  }
</style>
